@import './common';

.screen-model{
	width: 100%;
	height: 100%;
	overflow-y: auto;

	.tags-wrap{
		box-sizing:border-box;
		padding: setSize(43) setSize(48);

		.title{
			font-size: setSize(30);
			font-weight: 500;
			color: #333;
		}

		.tags{

			.tag{
				line-height:setSize(48);
				box-sizing:border-box;
				padding:0 setSize(30);
				margin-top: setSize(24);
				margin-right: setSize(32);
				background:rgba(245,246,248,1);
				border-radius:setSize(4);
				font-size:setSize(26);
				font-weight:400;
				color:rgba(112,112,112,1);
			}

			.tag-active{
				color: #fff;
				background-color: $mainColor;
			}
		}
	}
}

.lists-wrap{
	box-sizing:border-box;
	padding: setSize(24) setSize(24) 0;

	.lists{
		background-color:$thirdBgWin;
		border-radius:setSize(8);
		margin-bottom: setSize(12);

		.list-top{
			box-sizing:border-box;
			padding: setSize(24);

			.img-box{
				margin-right: setSize(20);

				.img{
					display: block;
					width: setSize(160);
					height: setSize(160);
					border-radius:setSize(4);
				}
			}

			.section{
				@include ellipsis;

				.title{
					height:setSize(48);
					line-height:setSize(48);
					font-size:setSize(34);
					font-weight:400;
					@include ellipsis;
				}

				.sub-title{
					height:setSize(33);
					line-height:setSize(33);
					padding:setSize(20) 0;
					font-size:setSize(24);
					font-weight:400;
					color:rgba(112,112,112,1);
					@include ellipsis;

					.gym,.addr{
						margin-right: setSize(20);
						@include ellipsis;
					}
				}

				.tags{

					.tag{
						height:setSize(38);
						line-height:setSize(38);
						padding:0 setSize(10);
						margin-right: setSize(10);
						border-radius:setSize(4);
						font-size:setSize(20);
						font-weight:500;						
						color:$mainColor;
						border:setSize(1) solid $mainColor;
						border-radius:setSize(8);
						@include ellipsis;
					}
				}
			}
		}

		.list-bottom{
			box-sizing:border-box;
			padding: 0 setSize(24) setSize(24) 0;

			.item{
				max-width: 100/3*1%;
				box-sizing:border-box;
				padding-left: setSize(24);

				.img-wrap{
					position: relative;
					width: 100%;

					.img-box{

						.img{
							display: block;
							width: 100%;
							height:setSize(144);
							border-radius:setSize(8);
						}
					}

					.tag{
						position:absolute;
						top: 0;
						left: 0;
						max-width: 100%;
						height:setSize(38);
						line-height: setSize(38);
						box-sizing:border-box;
						padding:0 setSize(20);
						background:rgba(0,0,0,0.5);
						border-radius:setSize(8) setSize(4) setSize(4) setSize(0);
						font-size:setSize(20);
						font-weight:500;
						color:rgba(255,255,255,1);
						@include ellipsis;
					}
				}

				.title{
					height:setSize(33);
					line-height:setSize(33);
					padding:setSize(20) 0 setSize(8);
					font-size:setSize(24);
					font-weight:400;
					color:rgba(112,112,112,1);
					@include ellipsis;
				}

				.cost-wrap{
					align-items: flex-end;

					.cost-box{
						margin-right: setSize(12);
						font-size: setSize(30);
						font-weight: 400;
						color: #FA6B2F;

						.unit{
							font-size: setSize(20);
						}
					}

					.sub-cost{
						height:setSize(28);
						line-height:setSize(28);
						font-size:setSize(20);
						font-weight:400;
						color:rgba(102,102,102,1);
					}
				}
			}
		}
	}
}

.fixed-icon-box{
	position:fixed;
	bottom:setSize(100);
	right: setSize(60);

	.fixed-icon{
		display: block;
		width: setSize(100);
		height: setSize(100);
	}
}